<link rel="stylesheet"
	href="${basePath}/resources/common/libs/datetimepicker/css/bootstrap-datetimepicker.min.css" />
<section class="content-header">
	<h1>
		数据对比 <small>列表</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="${basePath}"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li><a href="#">系统管理</a></li>
		<li class="active">数据对比</li>
	</ol>
</section>

<section class="content">
	<div class="row">
		<div class="col-md-2" style="padding-left: 5px; padding-right: 5px;">
			<!-- Profile Image -->
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div id="tree"></div>
				</div>
			</div>
		</div>

		<div class="col-md-10">

			<div class="row" style="padding-bottom: 20px;">
				<form id="user-form" name="user-form" class="form-horizontal">
					<div class="box-body">

						<div class="col-md-4">
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">图表一</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
									<input type="text" class="form-control" data-flag="datetimepicker" data-format="yyyy-mm-dd hh:ii:ss" name="startTime" id="startTime" placeholder="开始时间">
								</div>
							</div>
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">图表二</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
									<input type="text" class="form-control" data-flag="datetimepicker" data-format="yyyy-mm-dd hh:ii:ss" name="start1Time" id="start1Time" placeholder="开始时间">
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">图表一</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
									<input type="text" class="form-control" data-flag="datetimepicker" data-format="yyyy-mm-dd hh:ii:ss" name="endTime" id="endTime" placeholder="结束时间">
								</div>
							</div>
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">图表二</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
									<input type="text" class="form-control" data-flag="datetimepicker" data-format="yyyy-mm-dd hh:ii:ss" name="end1Time" id="end1Time" placeholder="结束时间">
								</div>
							</div>
						</div>
						<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
							<a class="btn btn-info" href="#component" onclick="dataQuery(1)">
							<i class="fa fa-cog">&nbsp;开始对比</i>
							</a>
						</div>
					</div>
				</form>
			</div>

			<div class="row" style="margin-left: 2px; margin-right: 5px;">
				<div class="row">
					<div class="col-md-12"
						style="padding-left: 2px; padding-right: 2px;">
						<div class="box box-primary">
							<div class="box-body">
								<iframe id="iframId1" src="${grafanaHost}/dashboard-solo/db/table?orgId=1&from=1529723911484&to=1529745511484&panelId=1&theme=light" width="99%" height="300" frameborder="0"></iframe>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12"
						style="padding-left: 2px; padding-right: 2px;">
						<div class="box box-primary">
							<div class="box-body">
								<iframe id="iframId2" src="${grafanaHost}/dashboard-solo/db/table?panelId=2&orgId=1&from=1529724063830&to=1529745663830&theme=light" width="99%" height="300" frameborder="0"></iframe>
							</div>
						</div>
					</div>

				</div>

			</div>

		</div>

	</div>
</section>



<script src="${basePath}/resources/common/libs/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${basePath}/resources/common/libs/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
	var selectNode;
	var currentObj = {
		initTree : function(selectNodeId) {
			var self = this;
			var treeData = null;
			ajaxPost(basePath + "/org/treeData", null, function(data) {
				treeData = data;
			});
			$("#tree").treeview({
				data : treeData,
				showBorder : true,
				expandIcon : "glyphicon glyphicon-stop",
				collapseIcon : "glyphicon glyphicon-unchecked",
				levels : 3,
				onNodeSelected : function(event, data) {
					selectNode = data.id;
					//TODO加载基地数据
					currentObj.loadHistryData(selectNode);
				}
			});
			if (treeData.length == 0)
				return;
			//默认选中第一个节点
			selectNodeId = selectNodeId || 0;
			$("#tree").data('treeview').selectNode(selectNodeId);
			$("#tree").data('treeview').expandNode(selectNodeId);
			$("#tree").data('treeview').revealNode(selectNodeId);
			currentObj.loadHistryData(selectNodeId);
		},
		loadHistryData : function(selectNodeId) {
			var dcode;
			ajaxPost(basePath + "/device/getCollectDevice/" + selectNodeId, null, function(data) {
				if (data.success) {
					dcode = data.data;
				}
			});
			if (dcode && dcode.length > 0) {
				var url1 = '${grafanaHost}/dashboard-solo/db/table_'+dcode+'?panelId=1&orgId=1&from=now-24h&to=now&theme=light';
				var url2 = '${grafanaHost}/dashboard-solo/db/table_'+dcode+'?panelId=2&orgId=1&from=now-48h&to=now-24h&theme=light';
				$("#iframId1").attr('src', url1);
				$("#iframId2").attr('src', url2);
			}
		}
	}
	var form;
	$(function() {
		form = $("#user-form").form();
		currentObj.initTree(1);
	})

	function dataQuery(dataRange) {
		var start;
		var end;
		var start1;
		var end1;
		if (dataRange == 1) {//实时查询
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			var start1Time = $("#start1Time").val();
			var end1Time = $("#end1Time").val();
			if (startTime && start1Time && endTime && end1Time) {
				var startDate = new Date(startTime + ":000");
				start = startDate.getTime();
				var endDate = new Date(endTime + ":000");
				end = endDate.getTime();
				
				var start1Date = new Date(start1Time + ":000");
				start1 = start1Date.getTime();
				var end1Date = new Date(end1Time + ":000");
				end1 = end1Date.getTime();
			}else{
				alert('请选择时间段');
				return
			}
			var src1 = $("#iframId1").attr('src');
			var src2 = $("#iframId2").attr('src');
			var startUrl = changeUrlArg(src1, 'from', start);
			var endUrl = changeUrlArg(startUrl, 'to', end);
			
			var startUrl1 = changeUrlArg(src2, 'from', start1);
			var endUrl1 = changeUrlArg(startUrl1, 'to', end1);
			
			$("#iframId1").attr('src', endUrl);
			$("#iframId2").attr('src', endUrl1);
			
			
		}
	}

	function changeUrlArg(url, arg, val) {
		var pattern = arg + '=([^&]*)';
		var replaceText = arg + '=' + val;
		return url.match(pattern) ? url.replace(eval('/(' + arg
				+ '=)([^&]*)/gi'), replaceText) : (url.match('[\?]') ? url
				+ '&' + replaceText : url + '?' + replaceText);
	}
</script>